//#region
import React, { useEffect, useRef } from 'react'
import {
  Breadcrumb,
  Card,
  Form,
  Radio,
  Select,
  DatePicker,
  Button,
  message
} from 'antd'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { getChannels } from '@/store/actions/channel'
import { getArticleList, delArticle } from '@/store/actions/article'

import MyTable from './MyTable'
//#endregion

const { RangePicker } = DatePicker
export default function Article () {
  const dispatch = useDispatch()
  const channeList = useSelector(state => state.channel)
  // 获取数据
  const {
    results: articleList, // 表格数据
    total_count: total, // 数据数量
    page: current, //页码
    per_page: pageSize
  } = useSelector(state => state.article)

  useEffect(() => {
    // 获取下拉列表
    dispatch(getChannels())
    // 获取文章数据
    dispatch(getArticleList())
  }, [dispatch])

  // 搜索功能
  const paramsRef = useRef({}) // 利用useref的current属性保存一个可变值，我理解这是当做函数式组件的状态
  const onFinish = value => {
    console.log(value, '表单')
    const { status, channel_id, date } = value
    const params = {
      status,
      channel_id,
      page: 1,
      per_page: 10
    }
    if (date) {
      // 格式化时间
      params.begin_pubdate = date[0]
        .startOf('day')
        .format('YYYY-MM-DD HH:mm:ss')
      params.end_pubdate = date[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')
    }
    paramsRef.current = params
    console.log(paramsRef, 'paramsRef')
    // 发送请求
    dispatch(getArticleList(params))
  }

  // 分页事件--接收两个参数 点击页和每页条数
  const onChange = (page, per_page) => {
    // 拿到存储在paramsRef.current中的params
    const params = paramsRef.current
    dispatch(getArticleList({ ...params, page, per_page }))
  }

  // 删除
  const del = async id => {
    // 确认是否删除
    console.log('要删除的id', id)
    await dispatch(delArticle(id))
    // 重新获取数据
    dispatch(getArticleList(paramsRef.current))
    console.log(paramsRef.current)
    message.success('删除成功')
  }
  return (
    <div>
      <Card
        // title 属性传入jsx
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to='/home'>首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>文章列表</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        {/* form 表单组件  onFinish:提交表单验证成功后的回调；initialValues：表单默认值，初始化以及重置时生效*/}
        <Form onFinish={onFinish} initialValues={{ status: undefined }}>
          <Form.Item label='状态' name='status'>
            {/* Radio.Group 实现单选框组 */}
            <Radio.Group>
              <Radio value={undefined}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label='频道' name='channel_id'>
            <Select placeholder='请选择频道' style={{ width: 200 }}>
              {channeList.map(item => {
                return (
                  <Select.Option value={item.id} key={item.id}>
                    {item.name}
                  </Select.Option>
                )
              })}
            </Select>
          </Form.Item>

          <Form.Item label='日期' name='date'>
            <RangePicker />
          </Form.Item>

          <Form.Item>
            <Button type='primary' htmlType='submit'>
              筛选
            </Button>
          </Form.Item>
        </Form>

        {/* 拆分成组件 */}
        <MyTable
          paging={{ pageSize, current, total }}
          fn={{ onChange, del }}
          article={articleList}
        ></MyTable>
      </Card>
    </div>
  )
}
